<template>
  <div class="container-setting">
    <el-card>
      <div slot="header">
        <my-bread>个人设置</my-bread>
      </div>
      <!-- 栅格 -->
      <el-row>
        <el-col :span="12">
          <!-- 表单 -->
          <el-form label-width="120px">
            <el-form-item label="编号：">{{userForm.id}}</el-form-item>
            <el-form-item label="手机：">{{userForm.mobile}}</el-form-item>
            <el-form-item label="媒体名称:">
              <el-input v-model="userForm.name" placeholder="请输入媒体名称"></el-input>
            </el-form-item>
            <el-form-item label="媒体介绍">
              <el-input type="textarea" :rows="3" v-model="userForm.intro" placeholder="请输入媒体介绍"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateUserInfo()">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 头像设置 -->
        <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            action=""
            :http-request="changeFile"
            :show-file-list="false"
          >
            <img v-if="userForm.photo" :src="userForm.photo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="text">修改头像</p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import eventBus from '@/eventBus'
import auth from '@/utils/auth'
export default {
  name: "setting-page",
  data () {
      return {
          userForm : {
              id:null,
              mobile:null,
              photo:null,
              name:null,
              intro:null,
              email:null
          },
        //   上传组件预览
          imageUrl:null
      }
  },
  created () {
      this.getUserInfo();
  },
  methods : {
      async getUserInfo () {
          const {data:{data}} = await this.$http.get('/user/profile')
          this.userForm = data
      },
    //   编辑用户信息
    async updateUserInfo () {
        try{
            // 结构得到请求数据
            const {name,intro,email} = this.userForm
            // 发请求
            await this.$http.patch('/user/profile',{name,intro,email})
            // 提示
            this.$message.success('保存设置成功')
            // 同步用户名
            eventBus.$emit('update-user-name',name);
            // 修改储存的用户信息
            const localUser =  auth.getUser()
            localUser.name = name;
            auth.setUser(localUser)
            
        }catch(e){
            // 编辑失败
            if(e.response && e.response.status === 409){
                return this.$message.error('媒体名称已存在')
            }
             if(e.response && e.response.status === 400){
                return this.$message.error('媒体名称请输入1-7个字符!!!')
            }
            this.$message.error('保存设置失败')
        }
    },
    // 编辑用户头像
    async changeFile ({file}) {
        try{
            const formData = new FormData();
            formData.append('photo',file)
            // 提交数据
            const {data:{data}} = await this.$http.patch('/user/photo',formData)
            this.$message.success('修改头像成功')
            // 更新图片进行预览
            this.userForm.photo = data.photo
            // eventBus设置事件,更新用户头像
            eventBus.$emit('update-user-photo',data.photo)
            const localUser = auth.getUser();
            localUser.photo = data.photo
            auth.setUser(localUser)
        }catch(e){
            this.$message.error('修改头像失败')
        }
    }
  }
};
</script>
<style lang="less">
.text {
    text-align: center;
    font-size: 12px;
}
</style>